<html>

<head>
    <meta charset="UTF-8">
    <title>promise.all的应用</title>
</head>

<body>
<script>
    // promise.all 可以包装多个 形成一个新的实例
    let p1 = new Promise((resolve, reject) => {
        resolve("成功01")
    })
    let p2 = new Promise((resolve, reject) => {
        resolve("成功02")
        //reject("失败02")
    })
    let p3 = new Promise((resolve, reject) => {
        resolve("成功03")
    })

    // 它的状态由p1,p2,p3共同决定，只要有一个失败，整个失败
    let pAll = Promise.all([p1, p2, p3])

    // 如果有多个失败，回调接收第一个失败实例的值当成参数返回all
    pAll.then(value => {
        console.log(value)
    }).catch((reason => {
        // 如果在这里写了catch方法，会覆盖promise原来的catch
        console.log(reason)
    }))
    console.log(pAll)

    // 使用场景：当多个请求构成同一页面的数据时，用promise.all合并请求所有的数据，渲染到页面上，
    //但如果有一个请求失败， 合并的就失败了
    // 合并的请求处旦不同时间
    function getBannerList() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('轮播图的数据')
            }, 1000)
        })
    }

    function getMusicList() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('歌曲列表的数据')
            }, 2000)
        })
    }

    function getCateList() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('歌单分类的数据')
            }, 3000)
        })
    }

    function init() {
        let all = Promise.all([getBannerList, getMusicList, getCateList])
        // console.log(all)
        all.then(value => {
            console.log(value)
        })
    }

    init()

    // 只要1个成功就返回
    Promise.any([p1, p2, p3]).then(res=>{
        console.log("执行promise.any:",res)
    })
</script>
</body>

</html>
